import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom/cjs/react-router-dom";
import { Mask, DotLoading } from "antd-mobile";

import { useDispatch } from "react-redux";
import ProofNavigateBar from "@/components/ProofNavigateBar";
import { saveEvent } from "@/store/actions/saveEvent";
import icon_guide_logo from "@/assets/icon_guide_logo.png"
import icon_guide_rate_star from "@/assets/icon_guide_rate_star.png"
import icon_guide_step_v2_1 from "@/assets/icon_guide_step_v2_1.png"
import icon_guide_loading from '@/assets/icon_guide_loading.gif'
import icon_guide_tips from "@/assets/icon_guide_tips.png"

import './guide.css';
// import AddFavorite from "@/components/AddFavorite";
import AddToHomeGifDialog from "@/components/AddToHomeGifDialog/AddToHomeGifDialog";
import AddHomeEvent from "@/utils/addHomeEvent";
import SignContractAskDialog from "@/components/SignContractAskDialog/SignContractAskDialog";

/**
 * 引导页
 */
export default function GuideV1() {

    // loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    // 订单状态
    const [curOrderId, setCurOrderId] = useState("")

    // 显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);
    //显示支付提示弹框
    const [signContractAskMaskVisible, setSignContractAskMaskVisible] = useState(false);

    // 获取路由历史 history 对象
    const history = useHistory()

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    //点击返回
    const onHandleNavGoBack = () => {
        console.log("go back")
        history.replace("/home")
    }

    // 点击add home监听
    const onHandleAddToHome = (type) => {
        console.log(`点击add home监听: ${type}`)
        if (type === 'home') {
            AddHomeEvent.onHandleAddHomeEventClick()
        } else {
            AddHomeEvent.onHandleAddFavoriteEventClick()
        }
    }

    // 关闭add home
    const onHandleAddToHomeClose = () => {
        console.log(`点击close add home监听`)
        setAddHomeMaskVisible(false)
    }

    // 关闭支付提示弹框
    const onHandleSignContractAskDialogClose = () => {
        // 关闭弹框
        setSignContractAskMaskVisible(false)
    }

    //已支付
    const onHandleDidSign = () => {
        // 关闭弹框
        setSignContractAskMaskVisible(false)
    }

    // 未支付
    const onHandleNotSign = () => {
        setSignContractAskMaskVisible(false)
    }

    // 点击安装事件
    const onHandleInstallClick = () => {
        //打点
        doHitEvent("INSTALL_CLICK")

        // 复制订单号
        // onHandleOrderIdCopy()

        // 显示订单弹框
        //setSignContractAskMaskVisible(true)

        // 1.5秒后打开应用市场
        // setTimeout(() => {
        //     // 打开应用市场
        //     const playUrl = "https://play.google.com/store/apps/details?id=com.mycontract.suitepro"
        //     const params = "&referrer=" + curOrderId
        //     const fullUrl = playUrl + params
        //     window.open(fullUrl, "_blank")
        // }, 1500)

        // 开始下载
        // const fullUrl = process.env.REACT_APP_PATH_APK;
        // window.open(fullUrl, "_blank")

        // 跳转下载页
        history.push("/download");
    }

    //启动时请求首页额度
    useEffect(() => {
        //获取贷款详情
        try {
            //添加 fb 像素
            // eslint-disable-next-line no-undef
            fbq('trackCustom', 'Page_Guide');
            // eslint-disable-next-line no-undef
            gtag('trackCustom', 'Page_Guide');

            //打点
            doHitEvent("GUIDE_START")

            return () => {
                //打点
                doHitEvent("GUIDE_END")
            }

        } catch (e) {
            console.log(e)
        }
    }, [])

    return (
        <div className="guideRoot">
            {/* 顶部背景 */}
            {/* <div className="applyTopBackground"></div> */}
            <ProofNavigateBar theme="white" onBackClick={onHandleNavGoBack} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>Loan withdrawal in app</ProofNavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            {/* 顶部banner */}
            {/* <div className="guideSwiperContent">
                <Swiper
                    loop
                    autoplay
                    style={{
                        '--border-radius': '8px',
                        '--track-padding': ' 0px 0px 32px 0px'
                    }}
                    indicator={(total, current) => (
                        <div className="guideSwiperIndicator">
                            <div className="guideSwiperIndicatorContent">
                                <PageIndicator
                                    total={total}
                                    current={current}
                                    style={{
                                        '--dot-color': '#FFFFFF4D',
                                        '--active-dot-color': '#FFF',
                                        '--dot-size': '4px',
                                        '--active-dot-size': '8px',
                                        '--dot-border-radius': '50%',
                                        '--active-dot-border-radius': '4px',
                                        '--dot-spacing': '10px',
                                    }}
                                />
                            </div>
                        </div>
                    )}
                    defaultIndex={0}>
                    {items}
                </Swiper>
            </div> */}
            <div className="guideStepBg">
                <div className="guideStepContent">
                    <div className="guideStepRow">
                        <img className="guideStepImg1" src={icon_guide_step_v2_1} alt="" />
                        <div className="guideStepTitle1">Loan Eligibility Approved</div>
                    </div>
                    <div className="guideStepLineContent">
                        <div className="guideStepLine"></div>
                    </div>
                    <div className="guideStepRow">
                        <img className="guideStepImg1" src={icon_guide_loading} alt="" />
                        <div className="guideStepTitle2">Confirm order</div>
                    </div>
                    <div className="guideStepRowConfirm">
                        <div className="guideStepLineContentGray">
                            <div className="guideStepLine guideLineHightGray"></div>
                        </div>
                        <div className="guideStepDetailContent">
                            <div className="guideStepTip3 guideAppTopMargin6px">View your final loan offer</div>
                            <div className="guideStepDetailTagsContent">
                                <div className="guideStepDetailTag1">In app only</div>
                                <div className="guideStepDetailTag2">Confirm with one click</div>
                            </div>
                        </div>
                    </div>
                    <div className="guideStepRow">
                        <div className="guideStepImg3">3</div>
                        <div className="guideStepTitle1 guideNodeLoanWithdrawalTitle">Loan withdrawl</div>
                    </div>
                    <div className="guideStepRowConfirm">
                        <div className="guideStepLineContentEnd">
                        </div>
                        <div className="guideStepDetailContent">
                            <div className="guideStepDetailTagsContent">
                                <div className="guideStepDetailTag1">In app only</div>
                                <div className="guideStepDetailTag3">Disburse in 5 minutes</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div className="guideTipsBg">
                <div className="guideStepContent guideImportantTipsBg">
                    <div className="guideStepRow">
                        <img className="guideTipsImg" src={icon_guide_tips} alt="" />
                        <div className="guideTipsTitle">Precautions !</div>
                    </div>
                    <div className="guideTipsTips">Please complete loan confirmation and cash withdrawal on Loan Station app.</div>
                </div>
            </div>

            <div className="guideTipsBg">
                <div className="guideAppContent">
                    <div className="guideAppLogoContent">
                        <img className="guideAppLogo" src={icon_guide_logo} alt="" />
                        <div className="guideAppNameContent">
                            <div className="guideAppName">Loan Station- instant cash loan</div>
                            <div className="guideAppDev">Zenka Digital Limited</div>
                        </div>
                    </div>

                    <div className="guideAppRateContent">
                        <div className="guideAppRateItemContent">
                            <div className="guideAppRateItemRow">
                                <div className="guideAppRateValue">4.6</div>
                                <img className="guideAppRateStarImg" alt="" src={icon_guide_rate_star} />
                            </div>
                            <div className="guideAppRateTitle">Score</div>
                        </div>

                        <div className="guideAppRateLine"></div>

                        <div className="guideAppRateItemContent">
                            <div className="guideAppRateValue">18+</div>
                            <div className="guideAppRateTitle">Age</div>
                        </div>

                        <div className="guideAppRateLine"></div>

                        <div className="guideAppRateItemContent">
                            <div className="guideAppRateValue">100K+</div>
                            <div className="guideAppRateTitle">Downloads</div>
                        </div>

                        <div className="guideAppRateLine"></div>

                        <div className="guideAppRateItemContent">
                            <div className="guideAppRateValue">3M</div>
                            <div className="guideAppRateTitle">Size</div>
                        </div>

                        {/* <div className="guideAppRateLine"></div>

                        <div className="guideAppRateItemContent">
                            <div className="guideAppRateValue">13M</div>
                            <div className="guideAppRateTitle">Size</div>
                        </div> */}
                    </div>

                    {/* 去应用市场 */}
                    <div className="guideAppInstallContent" onClick={() => { onHandleInstallClick() }}>
                        {/* <img className="guideAppInstallImg" alt="" src={icon_guide_app_install} /> */}
                        <div className="guideAppInstallTitle">Install</div>
                    </div>

                    {/* 底部提示 */}
                    <div className="guideAppTipsDetail">You can install applications produced by licensed organizations with confidence.</div>
                    <div className="guideAppTipsDetail guideAppBottomMargin16px">Please do not install apps through other channels to avoid being scammed.</div>
                </div>
            </div>

            {/* add home gif dialog */}
            <AddToHomeGifDialog visible={addHomeMaskVisible} onConfirm={onHandleAddToHome} onClose={onHandleAddToHomeClose} isHomeMode={addHomeMaskIsHomeMode} />

            {/* 签约提示弹框 */}
            <SignContractAskDialog visible={signContractAskMaskVisible} curOrderId={curOrderId} onClose={onHandleSignContractAskDialogClose} onDidSign={onHandleDidSign} onNotSign={onHandleNotSign} />

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="overlayContent">
                    <span style={{ fontSize: 24, color: '#ff3141' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}